---
title: "文本转换"
# description: "Utilities for controlling the transformation of text."
description: "用于控制文本转换的功能类。"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/textTransform'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Normal Case

<!-- Use the `normal-case` utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints. -->
使用 `normal-case` 功能类来保留原来的外壳，这通常用于在不同的断点处重置大写。

```html emerald
<template preview>
  <p class="normal-case text-xl text-emerald-600">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**normal-case** ...">The quick brown fox ...</p>
```

## Uppercase

<!-- Use the `uppercase` utility to uppercase text. -->
使用 `uppercase` 功能类对文本进行大写转换。

```html purple
<template preview>
  <p class="uppercase text-xl text-purple-600">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**uppercase** ...">The quick brown fox ...</p>
```

## Lowercase

<!-- Use the `lowercase` utility to lowercase text. -->
使用 `lowercase` 功能类对文本进行小写转换。

```html rose
<template preview>
  <p class="lowercase text-xl text-rose-600">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**lowercase** ...">The quick brown fox ...</p>
```

## Capitalize

<!-- Use the `capitalize` utility to capitalize text. -->
使用 `capitalize` 功能类对文本进行首字母大写转换。

```html fuchsia
<template preview>
  <p class="capitalize text-xl text-fuchsia-600">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**capitalize** ...">The quick brown fox ...</p>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the text transformation of an element at a specific breakpoint, add a `{screen}:` prefix to any existing text transformation utility. For example, use `md:uppercase` to apply the `uppercase` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的文本转换，可在任何现有的文本转换功能类中添加 `{screen}:` 前缀。例如，使用 `md:uppercase` 来应用 `uppercase` 功能类在中等大小的屏幕和更大的屏幕上。

```html
<p class="capitalize **md:uppercase** ...">
  The quick brown fox jumped over the lazy dog.
</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

<!-- ### Variants -->
### 变体

<Variants plugin="textTransform" name="text transformation" />

<!-- ### Disabling -->
### 设计

<Disabling plugin="textTransform" name="text transformation" />
